<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          type="primary"
          @click="fetchData()"
          size="small">
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 20px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input v-model="listQuery.sn" class="input-width" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="提交时间：">
            <el-date-picker
              class="input-width"
              v-model="listQuery.createTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单状态：">
            <el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
              <el-option v-for="item in orderStatusOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单分类：">
            <el-select v-model="listQuery.type" class="input-width" placeholder="采购" clearable>
              <el-option v-for="item in orderTypeOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never" style="margin-top:20px">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">数据列表</span>
    </el-card>

    <div class="table-container">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;margin-top:20px;"
        >
        <el-table-column label="订单编号" align="center">
          <template slot-scope="scope">
            {{scope.row.sn}}
          </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center">
          <template slot-scope="scope">
            {{scope.row.created_time}}
          </template>
        </el-table-column>
        <el-table-column label="提交者" align="center">
          <template slot-scope="scope">
            {{scope.row.user}}
          </template>
        </el-table-column>
        <el-table-column label="项目" align="center">
          <template slot-scope="scope">
            {{scope.row.project}}
          </template>
        </el-table-column>
        <el-table-column label="订单类型" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type == 1">{{scope.row.type | formatType}}</el-tag>
            <el-tag type="primary" v-if="scope.row.type == 2">{{scope.row.type | formatType}}</el-tag>
            <el-tag type="danger" v-if="scope.row.type == 3">{{scope.row.type | formatType}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.status == -2">{{scope.row.status | formatStatus}}</el-tag>
            <el-tag type="warning" v-if="scope.row.status == -1">{{scope.row.status | formatStatus}}</el-tag>
            <el-tag type="danger" v-if="scope.row.status == 1">{{scope.row.status | formatStatus}}</el-tag>
            <el-tag type="warning" v-if="scope.row.status == 2">{{scope.row.status | formatStatus}}</el-tag>
            <el-tag type="success" v-if="scope.row.status == 3">{{scope.row.status | formatStatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{scope.row.note}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleOrderDetail(scope.row)">详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
    v-show="total>0"
    :total="total"
    :page.sync="listQuery.page"
    :limit.sync="listQuery.limit"
    @pagination="fetchData" />
  </div>
</template>

<script>
  import {
    fetchElectronicOrder,
    createElectronicOrder,
    updateElectronicOrder,
    deleteElectronicOrder
  } from '@/api/electronicOrder'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  const defaultListQuery = {
    sn: null,
    receiverKeyword: null,
    status: null,
    type: 3,
    createTime: null,
    page: 1,
    limit: 10
  };
  export default {
    name: "electronicOrder",
    components: { Pagination },
    filters: {
      formatCreateTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      formatType(value) {
        if (value === 1) {
          return '入库';
        } else if (value === 2) {
          return '出库';
        } else if (value === 3) {
          return '采购';
        }
      },
      formatStatus(value) {
        if (value === 1) {
          return '待审核';
        } else if (value === -1) {
          return '已关闭';
        } else if (value === -2) {
          return '未通过';
        } else if (value === 2) {
          return '待确认';
        } else if (value === 3) {
          return '已完成';
        }
      },
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        listLoading: true,
        total: 10,
        listQuery: Object.assign({}, defaultListQuery),
        orderTypeOptions: [
          {
            label: '入库',
            value: 1
          },
          {
            label: '采购',
            value: 3
          }
        ],
        orderStatusOptions: [
          {
            label: '未通过',
            value: -2
          },
          {
            label: '已关闭',
            value: -1
          },
          {
            label: '待审核',
            value: 1
          },
          {
            label: '待确认',
            value: 2
          },
          {
            label: '已完成',
            value: 3
          }
        ],
      }
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        this.listLoading = true
        console.log(this.listQuery)
        fetchElectronicOrder(this.listQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        });
      },
      handleResetSearch() {
        this.listQuery = Object.assign({}, defaultListQuery);
      },
      handleDelete(row) {
        console.log(row)
        this.$confirm('是否要删除该订单', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteElectronicOrder(row.id).then(response => {
            this.$message(response.message)
            this.fetchData()
          });
        });
      },
      handleOrderDetail(row) {
        this.$router.push({
          path: '/mpc/electronicOrderDetail',
          query: {'id':row.id}
        })
      }
    }
  }
</script>

<style scoped>

</style>
